<template>
  <div class="big-page">
    <page-header menu="PersonInformation"></page-header>
    <div class="show-layout">
      <div class="pager pager-left" :class="{'hide': page===1}">
        <i class="el-icon-arrow-left" @click="prev"></i>
      </div>
      <div class="column">
        <div class="column-row">
          <div class="search-wrapper" v-if="page===1"></div>
          <div class="search-wrapper" v-if="page===2"></div>
          <div class="search-wrapper" v-if="page===3"></div>
          <common-chart :chart-type="'bar'" size="big" :data="chart1" v-if="page===1"></common-chart>
          <common-chart :chart-type="'line'" size="big" :data="chart2" v-if="page===2"></common-chart>
        </div>
      </div>
      <div class="pager pager-right" :class="{'hide': page===2}">
        <i class="el-icon-arrow-right" @click="next"></i>
      </div>
    </div>
  </div>
</template>

<script>
import PageHeader from '@/views/pages/components/PageHeader'
import CommonChart from '@/views/pages/components/CommonChart'
export default {
  name: 'PersonInformation',
  data () {
    return {
      page: 1,
      title: '人员信息',
      chart1: {
        name: '详情信息',
        routeName: 'DetailInformation',
        query: { page: 'PersonInformation', id: '61' },
        title: '中关村楼宇扫码最多排行',
        xAxis: [],
        series: [],
        legend: []
      },
      chart2: {
        name: '详情信息',
        routeName: 'DetailInformation',
        query: { page: 'PersonInformation', id: '61' },
        title: '中关村新食堂时间区间',
        xAxis: [],
        series: [],
        legend: []
      }
    }
  },
  components: {
    PageHeader,
    CommonChart
  },
  created () {
    this.init()
  },
  mounted () {
  },
  methods: {
    toFirst () {
      setTimeout(() => {
        this.page = 1
        this.init()
      })
    },
    toDetail () {
      this.$router.replace({ name: 'DetailInformation', query: { id: '6' } })
    },
    init () {
      if (this.page === 1) {
        this.getChart1()
      } else if (this.page === 2) {
        this.getChart2()
      }
    },
    prev () {
      const currentPage = this.page
      if (currentPage > 1) {
        this.page = null
        setTimeout(() => {
          this.page = currentPage - 1
          this.init()
        }, 200)
      }
    },
    next () {
      const page = this.page
      if (page < 2) {
        this.page = null
        setTimeout(() => {
          this.page = page + 1
          this.init()
        }, 200)
      }
    },
    async getChart1 () {
      this.chart1.title = '中关村楼宇扫码最多排行'
      this.chart1.xAxis = [
        { data: ['新食堂', '京工餐厅', '3号教学楼', '8号教学楼', '中心教学楼', '研究生教学楼', '信息科学实验楼', '宇航楼'] }
      ]
      this.chart1.series = [{
        type: 'bar',
        barWidth: '40%',
        color: '#02BBFF',
        label: {
          show: true,
          position: 'top',
          textStyle: { color: '#fff', fontSize: 16, fontStyle: 'oblique' }
        },
        data: [4788, 2252, 2185, 1918, 1789, 1696, 1192, 1089]
      }]
    },
    async getChart2 () {
      this.chart2.title = '中关村新食堂时间区间'
      this.chart2.xAxis = [
        { data: ['6:00-8:00', '8:00-10:00', '10:00-12:00', '12:00-14:00', '14:00-16:00', '16:00-18:00', '18:00-20:00', '20:00-22:00'] }
      ]
      this.chart2.series = [{
        type: 'line',
        color: '#02BBFF',
        label: {
          show: true,
          position: 'top',
          textStyle: { color: '#fff', fontSize: 16, fontStyle: 'oblique' }
        },
        data: [227, 908, 1239, 825, 23, 1185, 339, 31]
      }]
    }
  }
}
</script>

<style scoped lang="scss">

</style>
